<template>
	<!-- <jspang></jspang> -->
	<div class="leftNav">
		<!-- router 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
		<el-menu router :default-active="activerouter" class="el-menu-vertical-demo" @select="handleSelect" @open="handleOpen" @close="handleClose" text-color="#fff" active-text-color="#fff" style="min-height: calc(100vh - 110px); overflow-y: scroll">
			<div class="head flex-center flex-column">
				<!-- <div class="headImg">
					<img src="../../assets/icon/headImg.jpeg" alt />
				</div> -->
				<div>
					{{ userList.userName }}
					{{ userList.roleString }}
				</div>
			</div>
			<div v-for="(item, index) in routerList" :key="item + index">
				<!-- 二级菜单 -->
				<div v-if="item.childList.length != 0">
					<el-submenu :index="item.name">
						<template slot="title">
							<div class="flex-between flex-alignCenter" style="padding-right: 20px">
								<!-- <img :src="item.img" alt /> -->
								<img :src="iconList[index]" alt />
								<span>{{ item.name }}</span>
								<div></div>
							</div>
						</template>
						<el-menu-item-group class="textCenter" v-for="(item2, index2) in item.childList" :key="item2 + index2">
							<el-menu-item :index="item2.path">
								<div @contextmenu.prevent="rightClick(item2.path)" class="flex-center">
									<div>{{ item2.name }}</div>
									<span v-if="item.name == '采购管理'">
										<span v-if="item2.name == '合同管理'">({{$store.state.meanTotal['合同管理']}})</span>
										<span v-if="item2.name == '信用证管理'">({{$store.state.meanTotal['信用证管理']}})</span>
										<span v-if="item2.name == '单证管理'">({{$store.state.meanTotal['单证管理']}})</span>
										<span v-if="item2.name == '报关管理'">({{$store.state.meanTotal['报关管理']}})</span>
										<span v-if="item2.name == '付款管理'">({{$store.state.meanTotal['付款管理']}})</span>
									</span>
								</div>

							</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
				</div>
				<div v-else>
					<el-menu-item ref="items" :index="item.path" class="textCenter">
						<div class="flex-between flex-center" style="padding-right: 20px" @contextmenu.prevent="rightClick(item.path)">
							<!-- <img :src="item.img" alt /> -->
							<img :src="iconList[index]" alt />
							<span slot="title">{{ item.name }}</span>
							<div></div>
						</div>
					</el-menu-item>
				</div>
			</div>
			<!--       <el-menu-item ref="items" index="/outbound/list" class="textCenter">
        <div class="flex-between flex-center" style="padding-right: 20px">
          <img src="../../assets/icon/rkgl.png" alt />
          <span slot="title">主页</span>
          <div></div>
        </div>
      </el-menu-item>
      <el-submenu index="4">
        <template slot="title">
          <div
            class="flex-between flex-alignCenter"
            style="padding-right: 20px"
          >
            <img src="../../assets/icon/cwgl.png" alt />
            <span>报表管理</span>
            <div></div>
          </div>
        </template>
        <el-menu-item-group class="textCenter">
          <el-menu-item index="/report/procurementa">采购A报表</el-menu-item>
          <el-menu-item index="/report/procurementb">采购B报表</el-menu-item>
        </el-menu-item-group>
      </el-submenu> -->
		</el-menu>
		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
			<span>确定退出用户吗</span>
			<span slot="footer" class="dialog-footer" style="z-index: 2100">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="exit">确 定</el-button>
			</span>
		</el-dialog>
		<div class="portrait center">
			<!-- <img src="../../assets/icon/navBg.png" alt /> -->
		</div>
	</div>
</template>
<script>
export default {
	name: 'leftNav',
	data() {
		return {
			title: '如意',
			title2: '张小小店铺',
			// portrait: require("../../assets/icon/orange.png"),
			phone: '17828364726',
			dialogVisible: false,
			userList: '', //用户信息
			workerInfo: '',
			activerouter: '',
			routerList: [],
			iconList: [
				require('../../assets/icon/cgdgl.png'),
				require('../../assets/icon/xtsz.png'),
				require('../../assets/icon/grgzt.png'),
				require('../../assets/icon/cwgl.png'),
				require('../../assets/icon/kcgl.png'),
				require('../../assets/icon/pdgl.png'),
				require('../../assets/icon/xsldgl.png'),
				require('../../assets/icon/xmgl.png'),
			],
		};
	},
	watch: {
		$route(to, from) {
			this.activerouter = to.path;
			// console.log(to.path,'路由变化！！！！！！！！！！！！！！！！！');
		},
	},
	mounted() {
		this.activerouter = window.location.hash;
		this.activerouter = this.activerouter.substr(1);
	},
	created() {
		let userList = window.localStorage.userList
			? JSON.parse(window.localStorage.userList)
			: '';
		this.userList = userList;
		this.getRouterList();
		this.handleSelect(this.$route.path);
		this.$router.afterEach((to, from, next) => {
			// console.log(to, from, next);
			this.handleSelect(this.$route.path); //监听路由改变 存三级路由
		});
	},
	methods: {
		//右键事件
		rightClick(path) {
			// console.log(window.location)
			this.$contextmenu({
				items: [
					{
						label: '在新标签中打开链接',
						onClick: () => {
							window.open('/#' + path);
						},
					},
					{
						label: '返回',
						onClick: () => {
							this.$router.go(-1);
						},
					},
					{
						label: '前进',
						onClick: () => {
							this.$router.go(1);
						},
					},
					// { label: "重新加载(R)", divided: true, icon: "el-icon-refresh" },
					// { label: "另存为(A)..." },
					// { label: "打印(P)...", icon: "el-icon-printer" },
					// { label: "投射(C)...", divided: true },
					// {
					//   label: "使用网页翻译(T)",
					//   divided: true,
					//   minWidth: 0,
					//   children: [{ label: "翻译成简体中文" }, { label: "翻译成繁体中文" }]
					// },
					// {
					//   label: "截取网页(R)",
					//   minWidth: 0,
					//   children: [
					//     {
					//       label: "截取可视化区域",
					//       onClick: () => {
					//         this.message = "截取可视化区域";
					//         console.log("截取可视化区域");
					//       }
					//     },
					//     { label: "截取全屏" }
					//   ]
					// },
					// { label: "查看网页源代码(V)", icon: "el-icon-view" },
					// { label: "检查(N)" }
				],
				event,
				//x: event.clientX,
				//y: event.clientY,
				customClass: 'class-a',
				zIndex: 3,
				minWidth: 230,
			});
			return false;
		},

		getRouterList() {
			var arr = [];

			this.routerList = this.$store.state.menuList;
		},
		//跳转
		jumpTT(adress, message) {
			// this.$router.push(adress)
			this.$router.push({ path: adress, query: { docId: message } });
		},
		handleOpen(key, keyPath) {},
		handleClose(key, keyPath) {},
		handleSelect(key, keyPath) {
			// this.$router.push(key)

			//路由切换 把三级路由存进sotre
			// console.log("path", key);
			var routerList = this.routerList; //菜单列表
			var thirdMenu = [];
			var isExist = false; //是否查询到
			var secondChildList = []; //查询到的三级路由
			routerList.map((first) => {
				first.childList.map((second) => {
					//根据路由路径匹配
					second.childList.map((third) => {
						//先查询三级路由 如果此页面在三级路由里 则使用二级父路由的子路由
						if (third.path == key) {
							isExist = true;
							secondChildList = second.childList;
						} else if (second.path == key) {
							//如果在三级路由里没查到 再查询下此页面是否为二级路由
							//是的话使用此二级路由的子路由
							isExist = true;
							secondChildList = second.childList;
						}
					});
				});
			});
			if (isExist) {
				//如果存在路由 进行路由存储
				secondChildList.map((item) => {
					if (item.hideInMenu == 0) {
						//筛选掉不显示的页面 多为菜单栏之外的界面
						thirdMenu.push(item);
					}
				});
			}
			// console.log("thirdMenu", thirdMenu);
			this.$store.state.thirdMenu = thirdMenu;
		},
		hrefSz() {
			this.$router.push('/ModifyStore');
		},
		exit() {
			var parmas = {};
			this.$myApi.loginOut(parmas).then((res) => {
				if (res.returnCode == 0) {
					this.$router.push('/');
				}
			});
		},
		accountSettings() {
			this.$router.push('/accountSettings');
		},
	},
};
</script>
<style scoped>
.leftNav .headImg {
	width: 73px;
	height: 73px;
	border-radius: 100%;
	/* margin-left: 20px; */
	margin-bottom: 10px;
	/* padding: 10px; */
	background: #fff;
	overflow: hidden;
}
.headImg img {
	height: 100%;
	width: 100%;
}
.leftNav {
	color: white;
	font-size: 12px;
}
.head {
	display: flex;
	padding: 20px 0;
	margin-top: 10px;
	margin-bottom: 30px;
	width: 80%;
	margin-left: 10%;
	cursor: pointer;
	font-size: 16px;
}
.headTitle {
	display: inline-block;
	margin-left: 10px;
	height: 40px;
	font-size: 14px;
}
.portrait {
	height: 100%;
	width: 200px;
	position: absolute;
	bottom: 0;
	font-size: 15px;
	z-index: -1;
}
.portrait img {
	height: 100%;
	width: 100%;
}
.phone {
	margin-left: 10px;
	color: white;
	margin-right: 20px;
	/* width:125px; */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.textCenter {
	text-align: center;
}

.br {
	height: 1px;
	background: #eee;
	margin: 10px 0;
}
.exit img {
	height: 12px;
	width: 12px;
	margin-top: 4px;
}
.exit {
	line-height: 20px;
	cursor: pointer;
}
.exit2 {
	line-height: 20px;
}
.exit:not(:last-child):hover {
	color: #40a5ed;
}

.el-popover {
	padding: 0;
}
</style>

